
import {
    PivotSheet,
    DataCell,
    RowCell,
    ColCell,
    S2Theme,
    FONT_FAMILY,
    CellTextWordWrapStyle,
    getCellMeta,
    renderText,
  } from "@antv/s2";
export class CustomColCell1 extends ColCell {
    drawTextShape() {
      const { x, y, width, height, value } = this.getMeta();
      const text = String(value || ""); // 单元格文本内容
  
      // 计算文本绘制的中心位置
      var centerX = x + width / 2;
      const centerY = y + height / 2;
      console.log(text);
      if (this.meta.extra.writingMode === "ls") {
        const textStyle = {
          fontSize: 12,
          fill: "#000",
          textAlign: "left",
          textBaseline: "top",
        };
        [...text].forEach((char, index) => {
          this.textShape = renderText({
            group: this,
            textShape: [this.textShape],
            style: {
              ...textStyle,
              x: x + width / 2, // 水平居中
              y: y + 29 * index, // 垂直排列
              // wordWrap: true,
              // 文本必须为字符串
              text: `${char}`,
            },
          });
  
          this.addTextShape(this.textShape);
        });
      } else {
        /**
         * 1.获取单元格实际宽度 width 以及文字的宽度
         *    1.1  this.getActualTextWidth() 这个只是渲染文字的宽度 没有提供方法获取文字实际宽度
         *    1.2  还需要根据文字大小、个数`this.getOriginalText()` ,去求得实际宽度
         * 2.若文字宽度大于单元格宽度 则换行
         * 3.换行时 计算出单元格实际宽度可以存放多少个字数
         * 4.根据计算出的字数从相应位置加上\n换行符
         * 5.计算出行高以及行数 若大于表格高度 还需要高度自适应
         *    5.1 行高的计算公式
         *    5.2 单元格的上内边距是多少
         *    5.3 单元格的整体高度
         * 6.分散对齐为最后一行内容分散
         *    6.1 采用定位的方式 计算出每行行高 换一个行加一个行高 index*lineHight
         */
        const textStyle = {
          fontSize: 12,
          fill: "#000",
          textAlign: "left",
          textBaseline: "middle",
        };
        const padding = 10; // 单元格左右内边距
        const textWidth = textStyle.fontSize; // 每个字符的宽度
        const lineSpacing = 5; // 行间距
        const lineHeight = 1.5 * textWidth + lineSpacing; // 行高
        const baseX = x + padding; // 起始 X 坐标
        const centerY = y + height / 2 - lineHeight / 2; // Y 坐标居中
  
        // 计算每行可以放置的最大字符数
        const count = Math.floor((width - padding * 2) / textWidth);
  
        let currentY = centerY; // 初始化 Y 坐标以保证第一行居中显示
        let charIndex = 0;
        let lines = [];
  
        // 第一次遍历：分割文本成多行，并收集每一行的文本
        while (charIndex < text.length) {
          let lineText = "";
          for (
            let i = 0;
            i < count && charIndex < text.length;
            i++, charIndex++
          ) {
            lineText += text[charIndex];
          }
          lines.push(lineText);
        }
  
        // 渲染每一行文本
        lines.forEach((lineText, lineIndex) => {
          if (lineIndex === lines.length - 1 && lineText.length > 1) {
            // 最后一行且不止一个字符
            // 分散对齐最后一行字符
            const spacing =
              (width - 2 * padding - textWidth * lineText.length) /
              (lineText.length - 1);
            [...lineText].forEach((char, index) => {
              const charX = baseX + index * (textWidth + spacing);
              this.textShape = renderText({
                group: this,
                textShape: [this.textShape],
                style: {
                  ...textStyle,
                  x: charX,
                  y: currentY,
                  text: `${char}`,
                },
              });
            });
          } else {
            // 正常渲染其他行文本
            [...lineText].forEach((char, index) => {
              const charX = baseX + index * textWidth;
              this.textShape = renderText({
                group: this,
                textShape: [this.textShape],
                style: {
                  ...textStyle,
                  x: charX,
                  y: currentY,
                  text: `${char}`,
                },
              });
            });
          }
          this.addTextShape(this.textShape);
  
          // 更新到下一行的 Y 坐标
          currentY += lineHeight;
        });
      }
  
      console.log(this.textShapes);
    }
  }